<template>
  <div>
    <div class="planning-box">
      <div class="resource-manage">
        <div class="card-box">
          <div class="card-title">土地信息</div>
          <el-form ref="formConstructionLand" class="form-wrap" label-position="top" size="small" :model="formPlanning.landInfo" :rules="landInfo_rules">
            <el-form-item label="宗地号" prop="parcelNum">
              <el-input maxlength="30" placeholder="请输入" v-model="formPlanning.landInfo.parcelNum" @change="landCodeOnly"></el-input>
            </el-form-item>
            <el-form-item label="宗地面积(m²)" prop="parcelArea">
              <el-input maxlength="20" placeholder="请输入" v-model="formPlanning.landInfo.parcelArea"></el-input>
            </el-form-item>
            <el-form-item label="土地用途" prop="landUse">
              <el-select placeholder="请选择" v-model="formPlanning.landInfo.landUse">
                <el-option v-for="item in landUses" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="土地合同号" prop="landContractNum">
                            <el-input maxlength="18" placeholder="有，则填写合同号; 无，则不用填写" v-model="formPlanning.landInfo.landContractNum"></el-input>
            </el-form-item>-->
            <el-form-item label="物业地址" prop="cityCode" class="full">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select placeholder="请选择市" v-model="formPlanning.landInfo.cityCode">
                    <el-option v-for="item in cityAssembly" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select placeholder="请选择区" v-model="formPlanning.landInfo.countyCode" @change="handleChangeCountyCode">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.cityCode === '') ? [] : districtCollection"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select placeholder="请选择街道" v-model="formPlanning.landInfo.street" @change="handleChangeStreet">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.countyCgode === '') ? [] : projectStreet"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select placeholder="请选择社区" v-model="formPlanning.landInfo.community" @change="handleChangeCommunity">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.street === '') ? [] : communityNameStreet"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <!--<el-select placeholder="请选择管理权属" v-model="formPlanning.landInfo.manageUnit">
                                        <el-option
                                            v-for="item in manageUnits"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                  </el-select>-->
                  <el-input maxlength="50" placeholder="请输入道路及门牌号" v-model="formPlanning.landInfo.addressInfo" @change="handleValidateProject"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <!--<el-form-item label="地址" prop="addressInfo" class="full">
                            <el-input maxlength="50"  placeholder="请输入" v-model="formPlanning.landInfo.addressInfo"></el-input>
            </el-form-item>-->
          </el-form>
        </div>
        <div class="card-box">
          <div class="card-title">项目信息</div>
          <el-form ref="formConstruction" class="form-wrap" size="small" :model="formPlanning.propertyBasic" :rules="propertyBasic_rules">
            <el-form-item label="项目编号" prop="projectCode" v-if="isEdit">
              <el-input placeholder="请输入" readonly="readonly" v-model="formPlanning.propertyBasic.projectCode"></el-input>
            </el-form-item>
            <el-form-item label="项目国家编号" prop="projectCountryCode">
              <el-input maxlength="100" @change="validateProjectCountryCode" placeholder="请输入" v-model="formPlanning.propertyBasic.projectCountryCode"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName">
              <el-input placeholder="请输入" v-model="formPlanning.propertyBasic.projectName"></el-input>
            </el-form-item>
            <el-form-item label="项目面积(m²)" prop="projectArea">
              <el-input placeholder="请输入" v-model="formPlanning.propertyBasic.projectArea"></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="projectType">
              <el-select placeholder="请选择" v-model="formPlanning.propertyBasic.projectType">
                <el-option v-for="item in projectType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="管理权属" prop="manageUnit">
              <el-select placeholder="请选择管理权属" v-model="formPlanning.propertyBasic.manageUnit">
                <el-option v-for="item in manageUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="项目街道" prop="projectStreet">
                            <el-select placeholder="请选择" v-model="formPlanning.propertyBasic.projectStreet">
                                <el-option
                                    v-for="item in projectStreet"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="项目地址" prop="projectAddr" class="projectAddrAsterisk">
                            <el-input placeholder="请输入" v-model="formPlanning.propertyBasic.projectAddr"></el-input>
            </el-form-item>-->
            <el-form-item label="是否为更新项目" prop="isUpdate" v-if="addSource">
              <el-radio-group v-model="formPlanning.propertyBasic.isUpdate" size="small">
                <el-radio label="2">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="开发单位">
              <el-input maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.constructionUnit"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.contactName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.contactPhone"></el-input>
            </el-form-item>
            <el-form-item label="当前阶段">
              <el-input maxlength="30" :readonly="true" placeholder="请输入" v-model="formPlanning.propertyBasic.stage"></el-input>
            </el-form-item>
            <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
              <button type="button" @click="$refs.positionDialog.show()" style="position: absolute;top: 0px;left: 70px;">选择</button>
              <el-input maxlength="30" v-model="formPlanning.propertyBasic.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location"></el-input>
            </el-form-item>
            <el-form-item label="备注" class="full">
              <el-input maxlength="200" placeholder="请输入" v-model="formPlanning.propertyBasic.remarks"></el-input>
            </el-form-item>
          </el-form>
          <!-- 地图坐标选择弹窗 -->
          <positionDialog ref="positionDialog" @changeMessage="resetPosition" />
        </div>
        <div class="card-box">
          <div class="card-title">物业信息</div>
          <div class="table-planning">
            <el-button type="primary" plain icon="el-icon-plus" class="planning-button" @click="superInforAdd">添加</el-button>
            <el-table :data="formPlanning.supportingFacilities" style="width: 100%;">
              <el-table-column prop="propertyName" label="物业名称" width="120"></el-table-column>
              <el-table-column prop="projectType" label="物业类型" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="projectSubclassType" label="物业用途" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="floorSpace" label="占地面积(m²)" width="120"></el-table-column>
              <el-table-column prop="buildArea" label="建筑面积(m²)" width="120"></el-table-column>
              <el-table-column prop="transferMode" label="移交方式" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.transferType, transferModeOption)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="备注" width="120">
                <template slot-scope="scope">
                  <span :title="scope.row.remarks">{{scope.row.remarks | ellipsis}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClickEdit(scope)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, formPlanning.supportingFacilities)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="card-box">
          <div class="card-title">资料信息</div>
          <div class="material">
            <el-tabs v-model="milestoneSort" @tab-click="handleClick">
              <el-tab-pane
                :name="item.milestoneSort.toString()"
                :disabled="index > activeIndex"
                :key="item.milestoneSort"
                v-for="(item, index) in formPlanning.projectMilestones"
              >
                <span slot="label">
                  <div class="tabRadius">{{ item.milestoneSort }}</div>
                  <div>{{ item.milestoneName }}</div>
                </span>
                <el-table :data="item.materialsFormVoList" class="material-table" style="width: 100%;" @selection-change="handleSelectionChange">
                  <el-table-column prop="sort" label="序号" width="60"></el-table-column>
                  <el-table-column prop="materialsName" label="材料名称" width="120">
                    <template slot-scope="scope">
                      <div v-html="scope.row.materialsName"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="fileBusId" label="文件名称" width="160">
                    <template slot-scope="scope">
                      <el-row :gutter="10">
                        <el-col :xs="6" :sm="7" :md="7" :lg="7" :xl="7">
                          <div class="grid-content bg-purple" style="line-height: 40px">
                            <el-upload
                              v-if="isUpload[scope.$index]"
                              class="upload-demo"
                              action="/admin/sys-file/upLodeFileAdd"
                              :auto-upload="true"
                              :data="httpRequestData"
                              :before-remove="beforeRemove"
                              :show-file-list="false"
                              :http-request="(params)=>{httpRequest(params, scope)}"
                              :file-list="httpRequestFileLis"
                            >
                              <el-button size="small" icon="el-icon-upload">上传文件</el-button>
                            </el-upload>
                            <el-button v-else disabled size="small" icon="el-icon-upload">上传文件</el-button>
                          </div>
                        </el-col>
                        <el-col :xs="17" :sm="17" :md="17" :lg="17" :xl="17">
                          <div class="grid-content bg-purple-light" style="line-height: 40px">
                            <span>
                              {{scope.row.original}}
                              <i
                                v-if="scope.row.original"
                                class="el-icon-close"
                                style="margin-left: 5px;cursor: pointer;font-weight: bold"
                                @click="triggerBeforeRemove(scope)"
                              ></i>
                              <i
                                v-if="scope.row.original"
                                class="el-icon-download"
                                style="margin-left: 10px;cursor: pointer;font-weight: bold"
                                @click="triggerBeforeDownload(scope)"
                              ></i>
                            </span>
                          </div>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="备注" width="120">
                    <template slot-scope="scope">
                      <el-input size="small" v-model="scope.row.remarks" placeholder="请输入内容" maxlength="200"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="card-box">
          <el-button type="primary" plain class="planning-button" v-if="!isAdd" v-throttle="[handleUpdate]">更新</el-button>
          <el-button type="primary" plain class="planning-button" v-if="isAdd" v-throttle="[handlePreservation]">保存</el-button>
        </div>
      </div>
    </div>
    <v-dialog title="新增物业信息" :show.sync="dialogVisible" class="dialogForm" width="1200px" v-if="dialogVisible">
      <div class="card-box">
        <div class="card-title">物业信息</div>
        <el-form ref="bulletInformation-form" class="form-wrap" :rules="bulletInformation_rules" :model="bulletInformation">
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input maxlength="25" placeholder="请输入" v-model="bulletInformation.buildingName"></el-input>
          </el-form-item>
          <el-form-item label="所属楼层" prop="floorNum">
            <el-input type="text" maxlength="5" placeholder="请输入所属楼层，最长不超过三位" v-model="bulletInformation.floorNum"></el-input>
          </el-form-item>

          <el-form-item label="物业名称" prop="propertyName">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.propertyName" @change="propertyNameOnly"></el-input>
          </el-form-item>

          <el-form-item label="曾用名" prop="usedName">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.usedName"></el-input>
          </el-form-item>
          <el-form-item label="物业地址" prop="address" class="full">
            <el-input maxlength="50" placeholder="请输入" v-model="bulletInformation.address"></el-input>
          </el-form-item>

          <!--                    <div class="full">-->
          <!--                        <el-row :gutter="10">-->
          <!--                            <el-col :span="6">-->
          <!--                                <el-form-item label="物业名称" prop="propertyName">-->
          <!--                                    <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.propertyName" @change="propertyNameOnly"></el-input>-->
          <!--                                </el-form-item>-->
          <!--                            </el-col>-->
          <!--                            <el-col :span="6">-->
          <!--                                <el-form-item label="曾用名" prop="usedName">-->
          <!--                                    <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.usedName"></el-input>-->
          <!--                                </el-form-item>-->
          <!--                            </el-col>-->
          <!--                            <el-col :span="12">-->
          <!--                                <el-form-item label="物业地址" prop="address" class="col-two">-->
          <!--                                    <el-input maxlength="50" placeholder="请输入" v-model="bulletInformation.address"></el-input>-->
          <!--                                </el-form-item>-->
          <!--                            </el-col>-->
          <!--                        </el-row>-->
          <!--                    </div>-->
          <el-form-item label="初始类别" prop="initialType">
            <el-select placeholder="请选择" v-model="bulletInformation.initialType">
              <el-option v-for="item in initialTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业类型" prop="projectType">
            <el-select placeholder="请选择" @change="changeProjectType" v-model="bulletInformation.projectType">
              <el-option v-for="item in propertyTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业用途" prop="projectSubclassType">
            <el-select placeholder="请选择" v-model="bulletInformation.projectSubclassType">
              <el-option v-for="item in propertyUseTypesFilter" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规划用途" prop="planUse">
            <el-select placeholder="请选择" v-model="bulletInformation.planUse">
              <el-option v-for="item in planUses" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停车位数(个)" prop="parkingSpotNum" v-if="bulletInformation.planUse === '30'">
            <el-input maxlength="18" placeholder="仅在规划用途为停车位时填写" v-model="bulletInformation.parkingSpotNum"></el-input>
          </el-form-item>
          <el-form-item label="占地面积(m²)" prop="floorSpace">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.floorSpace"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积(m²)" prop="buildArea">
            <el-input maxlength="30" placeholder="请输入" @blur="handleUnitConstractionArea" v-model="bulletInformation.buildArea"></el-input>
          </el-form-item>
          <el-form-item label="套内面积(m²)" prop="insideArea">
            <el-input maxlength="30" placeholder="请输入" @blur="handleUnitConstractionArea" v-model="bulletInformation.insideArea"></el-input>
          </el-form-item>
          <el-form-item label="经营情况" prop="operation">
            <el-select v-model="bulletInformation.operation" placeholder="请选择经营情况">
              <el-option v-for="item in operations" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="非经营面积(m²)" prop="unmanagedArea">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.unmanagedArea" @blur="handleAreaCompared"></el-input>
          </el-form-item>
          <el-form-item label="经营面积(m²)" prop="managedArea">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.managedArea" @blur="handleAreaCompared"></el-input>
          </el-form-item>
          <el-form-item label="分摊公用面积(m²)" prop="noApportionedArea">
            <el-input maxlength="30" placeholder="请输入" v-model="bulletInformation.noApportionedArea" @blur="handleNoAppor"></el-input>
          </el-form-item>
          <el-form-item label="移交方式" prop="transferType">
            <el-select placeholder="请选择" v-model="bulletInformation.transferType">
              <el-option v-for="item in transferModeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="移交单位" prop="transferUnit">
            <el-input maxlength="25" placeholder="请输入" v-model="bulletInformation.transferUnit"></el-input>
          </el-form-item>
          <el-form-item label="移交日期" prop="receiveTime">
            <el-date-picker v-model="bulletInformation.receiveTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="remarks" class="full">
            <el-input maxlength="200" placeholder="请输入" v-model="bulletInformation.remarks"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button size="small" class="dialog-button-right" @click="handleDialogClear">取消</el-button>
        <el-button size="small" class="dialog-button-left" type="primary" @click="handleDialogClick">保存</el-button>
      </span>
    </v-dialog>
    <!-- 地图坐标选择弹窗
    <positionDialog ref="positionDialog" @changeMessage="resetPosition"/>-->
    <!-- 图片、文档预览弹窗 -->
    <el-dialog :visible.sync="dialogVisibleView" append-to-body :close-on-click-modal="false">
      <img width="100%" :src="previewUrl" alt v-if="previewType === 'image'" />
      <vPdf :fileId="previewUrl" v-else-if="previewType === 'pdf'" />
    </el-dialog>
  </div>
</template>

<script src="./constructionEdit.js">

</script>

<style scoped lang="scss">
@include formWrap(4);
@import "./constructionEdit";
</style>
